<template>
    <div class="indent">
        <!-- 头信息 -->
        <Homeheader />
        <!-- 内容区域 -->
        <div class="content">
            <div class="header">
                <span>订单</span>
                <div class="btn">
                    <el-button @click="changeflag1" :class="flag != 1 ? '' : 'active'">全部</el-button>
                    <el-button @click="changeflag2" :class="flag == 2 ? 'active' : ''">进行中</el-button>
                    <el-button @click="changeflag3" :class="flag == 3 ? 'active' : ''">准备好</el-button>
                    <el-button @click="changeflag4" :class="flag == 4 ? 'active' : ''">已完成</el-button>
                </div>
            </div>
            <div class="box">
                <div class="onebox" @click="dialogVisible = true">
                    <div class="one">
                        <div class="one-left" style="display: flex;align-items: center">
                            <p class="seat-num">A9</p>
                            <p style="display: flex;flex-direction: column;">
                                <span style="margin-bottom: 0.8vh">点餐员</span>
                                <span>#桌号/用餐</span>
                            </p>
                        </div>
                        <div class="one-right">
                            <el-button type="primary" size="small" style="margin-bottom: 0.5vh">准备好</el-button>
                            <p>随时待命</p>
                        </div>
                    </div>
                    <div class="two">
                        <span>2024年8月17日 上午 08:54</span>
                        <span>8菜肴</span>
                    </div>
                    <div class="three">
                        <span>全部的</span>
                        <span>70.74元</span>
                    </div>
                </div>
                <div class="onebox">
                    <div class="one">
                        <div class="one-left" style="display: flex;align-items: center">
                            <p class="seat-num">A9</p>
                            <p style="display: flex;flex-direction: column;">
                                <span style="margin-bottom: 0.8vh">点餐员</span>
                                <span>#桌号/用餐</span>
                            </p>
                        </div>
                        <div class="one-right">
                            <el-button type="primary" size="small" style="margin-bottom: 0.5vh">准备好</el-button>
                            <p>随时待命</p>
                        </div>
                    </div>
                    <div class="two">
                        <span>2024年8月17日 上午 08:54</span>
                        <span>8菜肴</span>
                    </div>
                    <div class="three">
                        <span>全部的</span>
                        <span>70.74元</span>
                    </div>
                </div>
                <div class="onebox">
                    <div class="one">
                        <div class="one-left" style="display: flex;align-items: center">
                            <p class="seat-num">A9</p>
                            <p style="display: flex;flex-direction: column;">
                                <span style="margin-bottom: 0.8vh">点餐员</span>
                                <span>#桌号/用餐</span>
                            </p>
                        </div>
                        <div class="one-right">
                            <el-button type="primary" size="small" style="margin-bottom: 0.5vh">准备好</el-button>
                            <p>随时待命</p>
                        </div>
                    </div>
                    <div class="two">
                        <span>2024年8月17日 上午 08:54</span>
                        <span>8菜肴</span>
                    </div>
                    <div class="three">
                        <span>全部的</span>
                        <span>70.74元</span>
                    </div>
                </div>
                <div class="onebox">
                    <div class="one">
                        <div class="one-left" style="display: flex;align-items: center">
                            <p class="seat-num">A9</p>
                            <p style="display: flex;flex-direction: column;">
                                <span style="margin-bottom: 0.8vh">点餐员</span>
                                <span>#桌号/用餐</span>
                            </p>
                        </div>
                        <div class="one-right">
                            <el-button type="primary" size="small" style="margin-bottom: 0.5vh">准备好</el-button>
                            <p>随时待命</p>
                        </div>
                    </div>
                    <div class="two">
                        <span>2024年8月17日 上午 08:54</span>
                        <span>8菜肴</span>
                    </div>
                    <div class="three">
                        <span>全部的</span>
                        <span>70.74元</span>
                    </div>
                </div>
            </div>
            <!-- 空状态 -->
            <!-- <div class="empty">
                <span class="iconfont icon-wj-wjxg" id="icon"></span>
                <p style="font-size: x-large;margin-top: 7.5vh">您没有任何订单</p>
                <p style="font-size:larger;color: #636566;">您今天尚未收到客户的任何订单。</p>
                <el-button type="primary" size="large"
                    style="margin-top: 1.8vh;background-color: #025CCA;border-radius:0.7em;width: 10vw;">
                    创建新订单
                </el-button>
            </div> -->

        </div>
        <!-- 底部导航 -->
        <Homefooter />
        <!-- 详情的模态框 -->
        <el-dialog id="mtk" v-model="dialogVisible" title="订单详情" width="500" :before-close="handleClose">
            <div class="one">
                <div class="one-left" style="display: flex;align-items: center">
                    <p class="seat-num">A9</p>
                    <p style="display: flex;flex-direction: column;">
                        <span style="margin-bottom: 0.8vh">点餐员</span>
                        <span>#桌号/用餐</span>
                    </p>
                </div>
                <div class="one-right">
                    <el-button type="primary" size="small" style="margin-bottom: 0.5vh">准备好</el-button>
                    <p>随时待命</p>
                </div>
            </div>
            <p style="font-size: 1.2rem;font-weight: bold">交易明细</p>
            <div class="tab">
                <el-table :data="tableData" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }">
                    <el-table-column prop="date" label="项目" />
                    <el-table-column prop="name" label="数量" />
                    <el-table-column prop="address" label="价格">
                        <template #default="scope">
                            <span>￥{{ scope.row.address }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-button class="addcy">+新增菜肴</el-button>
            <div class="price">
                <p style="display: flex;justify-content: space-between;margin-bottom: 0.5vh">
                    <span>小计</span>
                    <span>￥{{ 49.34 }}</span>
                </p>
                <p style="display: flex;justify-content: space-between;margin-bottom: 0.5vh">
                    <span>税率（5%）</span>
                    <span>￥{{ 2.47 }}</span>
                </p>
            </div>
            <div class="allprice">
                <span>实付</span>
                <span>￥{{ 51.81 }}</span>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button class="pay" type="primary" @click="dialogVisible = false">
                        支付账单
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Homefooter from '../../views/pages/Homefooter.vue';
import Homeheader from '../../views/pages/Homeheader.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
let flag = ref(1)
let changeflag1 = () => {
    flag.value = 1
}
let changeflag2 = () => {
    flag.value = 2
}
let changeflag3 = () => {
    flag.value = 3

}
let changeflag4 = () => {
    flag.value = 4
}
// 详情模态框
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
    done()
}
// 表格数据
const tableData = [
    {
        date: '西南炒碗',
        name: 1,
        address: '36.99',
    },
    {
        date: '卡夫饼',
        name: 2,
        address: '16.99',
    },
    // {
    //     date: '西南炒碗',
    //     name: 1,
    //     address: '36.99',
    // },{
    //     date: '西南炒碗',
    //     name: 1,
    //     address: '36.99',
    // },
]
</script>
<style lang="less" scoped>
.indent {
    padding-top: 10vh;
    box-sizing: border-box;

    .content {
        background-color: #F5F5F5;
        height: 83vh;
        width: 100vw;
        padding: 2vh 4vh;

        box-sizing: border-box;


        .header {
            display: flex;
            justify-content: space-between;
            // background-color: aquamarine;3
            align-items: center;
            margin-bottom: 3vh;

            span {
                font-size: 2.4vw;
                font-weight: bold;
            }

            .el-button {
                height: 4.8vh;
                border-radius: 1vb;
            }

            .active {
                background-color: #CDE7FE;
                color: #025CCA;
            }
        }

        .empty {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            #icon {
                font-size: 5vh;
                font-weight: 600;
                background-color: #DCEEFE;
                border-radius: 50%;
                padding: 5vh;
            }

            p {
                margin: 2.2vh
            }
        }

        .box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: start;
            border: 1px solid #ddd;

            .onebox {
                width: 32%;
                background-color: white;
                padding: 2vh;
                box-sizing: border-box;
                border-radius: 1rlh;
                margin-bottom: 2vh;

                .one {
                    display: flex;
                    justify-content: space-between;

                    // height: 5.3vh;
                    .one-left {
                        height: 100%;

                        .seat-num {
                            background-color: #CDE7FE;
                            color: #025CCA;
                            width: 4.4vw;
                            height: 100%;
                            border-radius: 0.5em;
                            text-align: center;
                            line-height: 5.3vh;
                            font-size: 1.6vw;
                            margin-right: 2vw;
                            font-weight: bold
                        }
                    }

                    .one-right {
                        .el-button {
                            background-color: #DCF7EA;
                            color: #286B4A;
                            border: 0px;
                        }
                    }
                }

                .two {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 4vh;
                    box-sizing: border-box;
                }

                .three {
                    display: flex;
                    justify-content: space-between
                }
            }
        }
    }
}

:deep(.el-dialog) {
    border-radius: 2vh;
    padding: 3vh;
    box-sizing: border-box;
    max-height: 65vh;
    overflow: scroll;
}

.el-dialog {
    .one {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.3vh;

        .one-left {
            height: 100%;

            .seat-num {
                background-color: #CDE7FE;
                color: #025CCA;
                width: 4.4vw;
                height: 100%;
                border-radius: 0.5em;
                text-align: center;
                line-height: 5.3vh;
                font-size: 1.6vw;
                margin-right: 2vw;
                font-weight: bold
            }
        }

        .one-right {
            .el-button {
                background-color: #DCF7EA;
                color: #286B4A;
                border: 0px;
            }
        }
    }

    .tab {
        margin-top: 2vh;
        margin-bottom: 2vh
    }

    .addcy {
        width: 100%;
        background-color: #F5F5F5;
        height: 4.5vh;
        margin-bottom: 4vh
    }
    .allprice{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1vh;
        margin-top: 3vh;
        font-size: 1.4rem;
    }
    .pay {
        background-color: #025CCA;
        color: white;
        width: 100%;
        height: 4.5vh;
    }
}
</style>